<template>
  <div>
    <el-tabs v-model="levelType" @tab-click="handleClick">
      <el-tab-pane label="企业问卷库" name="0"></el-tab-pane>
      <el-tab-pane label="我创建的问卷" name="1" v-if="showTabs"></el-tab-pane>
    </el-tabs>
    <div>
      <el-table ref="multipleTable" :data="tableList" style="width: 100%" height="456" row-key="id" @select="handleSelectionChange" @select-all="handleSelectionAll">
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column label="标题" prop="title" align="center" min-width="120">
          <template slot-scope="scope">
            <el-button @click="detailsClick(scope.row)" type="text" size="small">
              {{ scope.row.title }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="标签" prop="label" align="center" width="120">
          <template slot-scope="{ row }">
            <tagGroupShowTable :tagGroup="row.weGroupTagVOS" />
          </template>
        </el-table-column>
        <el-table-column label="填写人数" prop="writeCount" align="center">
          <template slot-scope="scope">
            所有填写：{{ scope.row.writeCount }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createBy" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center" min-width="140">
        </el-table-column>
      </el-table>
      <div class="paging">
        <NormalPagination :currentPage="form.pageNum" :pageSize="form.pageSize" :total="total" :pageSizeList="[10, 20, 30]" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
        <el-button type="info" plain @click="selectCancelFn">取消</el-button>
        <el-button type="primary" @click="selectSureFn">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getTableManageList } from '@/api/article/group'
import { dateFormat } from "@/utils/index"

export default {
  data() {
    return {
      levelType: "0",
      tableList: [],
      total: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
      },
      currentSelectList: [],
      materialFileVisible: false,
      detailForm: {},
    };
  },
  props: {
    linkList: {
      type: Array,
      default: () => []
    },
    showTabs: {
      type: Boolean,
      default: true,
    }
  },
  created() {
    this.currentSelectList = JSON.parse(JSON.stringify(this.linkList))
    this.queryList();
  },
  methods: {
    handleClick() {
      this.form = {
        pageNum: 1,
        pageSize: 10,
      };
      this.tableList = [];
      this.total = 0;
      this.queryList();
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.queryList()
    },
    handleSizeChange(val) {
      this.form.pageNum = 1
      this.form.pageSize = val
      this.queryList()
    },
    async queryList() {
      const params = {
        ...this.form,
        levelType: this.levelType,
      };
      const res = await getTableManageList(params);
      if (res.code === 200) {
        res.rows.forEach((item) => {
          item.createTime = dateFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss');
        });
        let customerInfo = JSON.parse(JSON.stringify(res.rows))
        if(customerInfo.weGroupTagVOS){
          customerInfo.weGroupTagVOS1 = JSON.parse(JSON.stringify(customerInfo.weGroupTagVOS))
          customerInfo.weGroupTagVOS = []
          customerInfo.weGroupTagVOS1.forEach(tagGroup=>{
            tagGroup.tagName.split(',').forEach(tagName=>{
              customerInfo.weGroupTagVOS.push({groupName:tagGroup.groupName,tagName})
            })
          })
        }

        this.tableList = customerInfo || [];
        this.tableList.forEach(element => {
          element.checked = false;
        })
        this.currentSelectList.length > 0 && this.tableList.forEach(element => {
          this.currentSelectList.forEach(item => {
            if (item.mediaType == 10 && element.id == item.id){
              element.checked = true;
              this.$refs.multipleTable.toggleRowSelection(element, true);
            }
          })
        })
        this.total = res.total || 0;
      }
    },
    handleSelectionChange(valList, newVal) {
      this.$refs.multipleTable.clearSelection();
      // 切换最近一次选择数据的状态
      this.$refs.multipleTable.toggleRowSelection(newVal, true);
      this.currentSelectList[0] = {
        name: newVal.title,
        id: newVal.id,
        coverUrl: window.globalConfig.IMAGE_API + newVal.photoUrl,
        materialUrl: window.globalConfig.IMAGE_API + newVal.photoUrl,
        mediaType: '10',
        materialType: '10',
        materialName: newVal.title,
      }
    },
    handleSelectionAll(valList) {
      // 访客雷达暂时不支持多选
    },
    selectCancelFn() {
      this.$emit("selectCancelFn");
    },
    selectSureFn() {
      this.$emit("confirm", this.currentSelectList);
      this.levelType = '0'
      this.$refs.multipleTable.clearSelection();
    },
    detailsClick(row) {
      this.$emit('view', row)
    },
  },
};
</script>
<style lang="scss" scoped>
.paging {
  text-align: right;
}
</style>
